<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>证券交易数据</title>
    <!--导入layui相关的样式-->
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <!-- 导入layui函数库 -->
    <script src="../layui/layui.js" charset="utf-8"></script>
    <!--加载jQuery函数库-->
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <!-- 注意：导入外部库的时候要
    注意改成自己的路径 -->
    <link rel="stylesheet" type="text/css" href="/css/font.css">
    <!--<style>::-webkit-scrollbar{display: none;}</style>-->
</head>
<body>
<blockquote class="layui-elem-quote news_search">
    <div class="layui-row">
        <script type="text/html" id="complain_toolbar">
            <form class="layui-form layui-col-md12 x-so" id="Trans_search">
                标记:
                <div class="layui-input-inline">
                    <select name="mark">
                        <option value="">---请选择---</option>
                        <option value="1">流入</option>
                        <option value="2">流出</option>
                    </select>
                </div>
                成交日期:
                <div class="layui-input-inline">
                    <input type="date" name="tranDate" id="tranDate" placeholder="请输入交易日期" autocomplete="off"
                           class="layui-input"/>
                </div>
                <button id="search" class="layui-btn layui-btn-primary layui-bg-gray" lay-submit data-type="reload"
                        lay-filter="provinceSearch">
                    <i class="layui-icon">&#xe615;</i>
                </button>
                <!--
                                <b class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel" style="margin-left: 500px"><i class="layui-icon">&#xe640;</i>批量删除</b>
                -->
                <b class="layui-btn layui-btn-sm layui-bg-blue" lay-event="lead_in_shang"><i
                        class="layui-icon">&#xe67d;</i>导入交易所数据</b>
                <b class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add"><i
                        class="layui-icon">&#xe654;</i>添加数据</b>
            </form>
        </script>
    </div>
    <!-- 多条件查询层结束 -->
    <!-- 表格头部上方工具栏 -->
    <!-- 行中操作按钮 [仅对本行操作]-->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="update">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>
    <!-- 数据表格 -->
    <table class="layui-hide" id="TransTable" lay-filter="TransList"></table>

    <!--导入上交所或者深交所弹出框-->
    <div id="lead-in" style="display: none;">
        <form method="POST" enctype="multipart/form-data" id="form1" action="/trabsactionCrud/form">
            <input id="upfile" type="file" class="layui-btn" name="upfile"
                   style="background: #06b535;margin-left: 90px;margin-top: 30px;"><br> <br>
            <input type="submit" value="表单提交" class="layui-btn" style="margin-left: 180px;margin-top: 30px;"
                   onclick="return checkData()">
            <!-- <input type="button" value="ajax提交" id="btn" name="btn" >-->
        </form>
    </div>

    <!-- 增加/修改界面开始 -->
    <div id="data-main" style="display: none;">
        <div class="layui-row" style="margin-left: 120px;margin-top:25px">
            <form class="layui-form" id="transForm" method="POST" lay-skin="line" lay-filter="transFormTest">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-icon">交易编号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="tranId" lay-verify="required" placeholder="请输入交易编号"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label layui-icon">成交日期</label>
                        <div class="layui-input-inline">
                            <input type="date" name="tranDate" lay-verify="required" placeholder="请输入成交日期"
                                   autocomplete="off"
                                   class="layui-input form-control layer-date">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label layui-icon">交易数量</label>
                        <div class="layui-input-inline">
                            <input type="text" name="tranNum" id="tranNum" lay-verify="required" placeholder="请输入交易数量"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-icon">单价</label>
                        <div class="layui-input-inline">
                            <input type="text" name="price" id="price" lay-verify="required" placeholder="请输入单价"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="display: none">
                        <label class="layui-form-label layui-icon">结算金额</label>
                        <div class="layui-input-inline">
                            <input type="text" name="settMoney" readonly="readonly" placeholder="请输入结算金额"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="display: none">
                        <label class="layui-form-label layui-icon">交易金额</label>
                        <div class="layui-input-inline">
                            <input type="text" name="tranMoney" id="tranMoney" readonly="readonly" placeholder="请输入交易金额"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label layui-icon">结算日期</label>
                        <div class="layui-input-inline">
                            <input type="date" name="settDate" required="required" placeholder="请输入结算日期"
                                   autocomplete="off"
                                   class="layui-input form-control layer-date">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label layui-icon">基金编号</label>
                        <div class="layui-input-inline">
                            <select name="fundId" class="layui-inline" id="fundId">
                                <option id="option" value="">---请选择---</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-icon">证券编号</label>
                        <div class="layui-input-inline">
                            <select name="seId" class="layui-inline" id="seIds">
                                <option value="">---请选择---</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label layui-icon">券商编号</label>
                        <div class="layui-input-inline">
                            <select name="stockId" class="layui-inline" id="stockId">
                                <option value="">---请选择---</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label layui-icon">席位编号</label>
                        <div class="layui-input-inline">
                            <select name="seatId" class="layui-inline" id="seatId">
                                <option value="">---请选择---</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-icon">现金账户号</label>
                        <div class="layui-input-inline">
                            <select name="caId" class="layui-inline" id="caId">
                                <option value="">---请选择---</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label layui-icon">交易方式</label>
                        <div class="layui-input-inline">
                            <select name="may" class="layui-inline">
                                <option value="">---请选择---</option>
                                <option value="买入">买入</option>
                                <option value="卖出">卖出</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" style="display: none">
                        <label class="layui-form-label layui-icon">品种费率编号</label>
                        <div class="layui-input-inline">
                            <select name="breedRateId" class="layui-inline" id="breedRateId">
                                <option value="">-&#45;&#45;请选择-&#45;&#45;</option>
                            </select>
                        </div>
                    </div>

                    <!--<div class="layui-inline">
                        <label class="layui-form-label layui-icon">证券利息</label>
                        <div class="layui-input-inline">
                            <input type="text" name="seInte" lay-verify="required" placeholder="请输入证券利息" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>-->
                    <div class="layui-inline">
                        <label class="layui-form-label layui-icon">交易状态</label>
                        <div class="layui-input-inline">
                            <select name="tranStatus" class="layui-inline">
                                <option value="-1">未结算</option>
                                <!--<option value="1">已结算</option>-->
                                <!--<option value="2">未结算</option>-->
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" style="display: none">
                        <label class="layui-form-label layui-icon">交易标记</label>
                        <div class="layui-input-inline">
                            <select name="mark" class="layui-inline">
                                <option value="">---请选择---</option>
                                <option value="1">流入</option>
                                <option value="-1">流出</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" style="display: none">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-icon">实收金额</label>
                        <div class="layui-input-inline">
                            <input type="text" name="actMoney" value="0" lay-verify="required" placeholder="请输入实收金额"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-col-md4 layui-col-md-offset4">
                        <button class="layui-btn layui-bg-blue" lay-submit lay-filter="formSave">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        layui.use(['table', 'layer', 'form', 'laypage', 'jquery', 'util', 'laydate'], function () {
            //导入模块并得到模块对象
            var table = layui.table,//表格对象
                layer = layui.layer,//弹层对象
                form = layui.form,//表单对象
                laypage = layui.laypage,//分页组件
                util = layui.util,//工具对象
                $ = layui.jquery;//jquery 对象
            //渲染表格
            var one = "";
            var two = "";
            var three = "";
            var four = "";
            var five = "";
            var six = "";
            table.render({
                elem: "#TransTable",
                url: "../Trans/action",
                limit: 15,//每页行数
                height: 740,
                method: 'get',
                page: true,//分页
                toolbar: "#complain_toolbar",//打印图标
                cols: [[
                    {checkbox: true},//开启多选框sort 表示排序
                    {field: "tranId", title: "交易编号", align: "center", sort: true, width: 200},
                    {field: "tranDate", title: "成交日期", align: "center", sort: true, width: 200},/*templet:function (d) {*/
                    //return util.toDateString(d.tranDate,"yyyy年MM月dd日 HH时:mm分:ss秒");
                    {field: "tranNum", title: "交易数量(股)", align: "center", sort: true, width: 200},
                    {field: "price", title: "交易单价(元)", align: "center", sort: true, width: 200},
                    {field: "settMoney", title: "结算金额(元)", align: "center", sort: true, width: 200,templet:function (d) {
                            if (d.settMoney.toString().indexOf(".")!=-1){
                                return d.settMoney.toLocaleString();
                            }else{
                                return (d.settMoney+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')+".00";
                            }
                        }},
                    {field: "tranMoney", title: "交易金额(元)", align: "center", sort: true, width: 200,templet:function (d) {
                            if (d.tranMoney.toString().indexOf(".")!=-1){
                                return d.tranMoney.toLocaleString();
                            }else{
                                return (d.tranMoney+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')+".00";
                            }
                        }},
                    {field: "settDate", title: "结算日期", align: "center", sort: true, width: 200},
                    {
                        field: "fundId", title: "基金名称", align: "center", sort: true, templet: function (d) {
                            for (var i = 0; i < four.length; i++) {
                                if (four[i].fundId == d.fundId) {
                                    return four[i].fundName;
                                }
                            }
                        }, width: 200
                    },
                    {
                        field: "seId", title: "证券名称", align: "center", sort: true, templet: function (d) {
                            for (var i = 0; i < two.length; i++) {
                                if (two[i].seId == d.seId) {
                                    return two[i].seName;
                                }
                            }
                        }, width: 200
                    },
                    {
                        field: "stockId", title: "券商名称", align: "center", sort: true, templet: function (d) {
                            for (var i = 0; i < five.length; i++) {
                                if (five[i].stockId == d.stockId) {
                                    return five[i].stockName;
                                }
                            }
                        }, width: 200
                    },
                    {
                        field: "seatId", title: "席位名称", align: "center", sort: true, templet: function (d) {
                            for (var i = 0; i < three.length; i++) {
                                if (d.seatId!=null && three[i].seatId.toString()== d.seatId.toString().substring(0,d.seatId.length-2)) {
                                    return three[i].seatName;
                                }
                            }
                        }, width: 200
                    },
                    {
                        field: "caId", title: "现金账户名称", align: "center", sort: true, templet: function (d) {
                            for (var i = 0; i < six.length; i++) {
                                if (six[i].caId == d.caId) {
                                    return six[i].accName;
                                }
                            }
                        }, width: 200
                    },
                    {
                        field: "may", title: "交易方式", align: "center", sort: true, width: 200},

                    {
                        field: "tranStatus", title: "交易状态", align: "center", sort: true, templet: function (d) {
                            if (d.tranStatus == -1) {
                                return "<span style='color: red;'>未结算</span>";
                            } else if (d.tranStatus == 1) {
                                return "<span style='color: #06b535;'>已结算</span>";
                            }
                        }, width: 200
                    },
                    /*{field:"actMoney",title:"实收金额",align:"center",sort:true,width: 200},*/
                    {
                        field: "mark", title: "交易标志", align: "center", sort: true, templet: function (d) {
                            if (d.mark == 1) {
                                return "<span style='color: #9BCA63;'>流入</span>";
                            } else if (d.mark == -1) {
                                return "<span style='color: #FAD860;'>流出</span>";
                            }
                        }, width: 200
                    },/*,templet :function(d){*/
                    {
                        field: "breedRateId", title: "交易所名称", align: "center", templet: function (d) {
                            for (var i = 0; i < one.length; i++) {
                                if (one[i].breedRateId == d.breedRateId) {
                                    return one[i].noeName;
                                }
                            }
                        }, width: 200
                    },
                    {fixed: 'right', title: '操作', toolbar: '#barDemo', align: "center", width: 160}
                ]
                ],
                limits: [5, 10,20,30,50],
                //品种
                parseData: function (res) {
                    one = res.exchange;
                    var oneStr = "<option value=''>--请选择--</option>";
                    for (var i = 0; i < one.length; i++) {
                        oneStr += "<option value='" + one[i].breedRateId + "'>" + one[i].noeName + "</option>";
                    }
                    $("#breedRateId").html(oneStr);

                    //证券
                    two = res.securi;
                    var twoStr = "<option value=''>--请选择--</option>";
                    for (var i = 0; i < two.length; i++) {
                        twoStr += "<option value='" + two[i].seId + "'>" + two[i].seName + "</option>";
                    }
                    $("#seIds").html(twoStr);

                    //席位
                    three = res.trading;
                    //alter(JSON.stringify(se));
                    var threeStr = "<option value=''>--请选择--</option>";
                    for (var i = 0; i < three.length; i++) {
                        threeStr += "<option value='" + three[i].seatId + "'>" + three[i].seatName + "</option>";
                    }
                    $("#seatId").html(threeStr);

                    //基金
                    four = res.fund;
                    //alter(JSON.stringify(se));
                    var fourStr = "<option value=''>--请选择--</option>";
                    for (var i = 0; i < four.length; i++) {
                        fourStr += "<option value='" + four[i].fundId + "'>" + four[i].fundName + "</option>";
                    }
                    $("#fundId").html(fourStr);

                    //券商
                    five = res.setting;
                    var fiveStr = "<option value=''>--请选择--</option>";
                    for (var i = 0; i < five.length; i++) {
                        fiveStr += "<option value='" + five[i].stockId + "'>" + five[i].stockName + "</option>";
                    }
                    $("#stockId").html(fiveStr);

                    //现金账户
                    six = res.cashAccount;
                    var sixStr = "<option value=''>--请选择--</option>";
                    for (var i = 0; i < six.length; i++) {
                        if (six.caId=21){//判断为基金自带账户，那么直接选择该账户，因为购买证券一般都是通过基金账户购买
                            sixStr += "<option selected='selected' value='" + six[i].caId + "'>" + six[i].accName + "</option>";
                        }else
                        sixStr += "<option value='" + six[i].caId + "'>" + six[i].accName + "</option>";
                    }
                    $("#caId").html(sixStr);
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": res.data
                    }
                },
            });


            //判断单价和交易数量的焦点失去事件


            //监听添加/修改页的提交操作
            var mehtod = "";

            form.on('submit(formSave)', function (data) {
                //证券应收应付
                /* var object={"srapId":data.field.tranId,"businDate":data.field.tranDate,
                             "money":data.field.settMoney,"fundId":data.field.fundId,
                             "seId":data.field.seId,"caId":data.field.caId,"businType":data.field.may,
                             "capflow":data.field.mark,"states":data.field.tranId
                 }
                 //证券应收应付
                 var json=JSON.stringify(object);
                 //ajax提交数据
                 //证券应收应付
                 $.ajax({
                     type: mehtod,//请求方式
                     url:"/securcontroller/securities",//Transcrud/Trans,//后台控制器路径
                     data:json,
                     dataType:"text",
                     contentType:"application/json;charset=utf-8",//前端发送json字符串到后端，必需设置
                     //提交成功后回调操作
                 });*/
                //证券交易数据
                $.ajax({
                    type: mehtod,//请求方式
                    url: "/Trans/action",//Transcrud/Trans,//后台控制器路径
                    data: JSON.stringify(data.field),
                    dataType: "text",
                    contentType: "application/json;charset=utf-8",//前端发送json字符串到后端，必需设置
                    //提交成功后回调操作
                    success: function (msg) {
                        layer.closeAll();//关闭对话框
                        layer.msg(msg);//弹出提示框
                        table.reload('TransTable');//刷新数据表格
                    }
                });
                return false;
            });


            //表格头部工具栏事件代码，根据lay-event属性值判断执行相应的代码
            table.on('toolbar(TransList)', function (obj) {
                //检查表格选择操作状态
                var checkStatus = table.checkStatus(obj.config.id);
                //判断事件event值
                switch (obj.event) {
                    //批量删除操作：删除选定的多行数据
                    case "batchDel":
                        //获得选中的表格行
                        var data = checkStatus.data;
                        //判断是否大于0行
                        if (data.length > 0) {
                            layer.confirm('请确认是否真的删除?', function (index) {
                                //获取所有选择的id
                                var tranIdStr = "";
                                for (var i = 0; i < data.length; i++) {
                                    tranIdStr = tranIdStr + data[i].tranId + ",";//累加字符
                                }
                                //去掉最后多余逗号
                                tranIdStr = tranIdStr.substring(0, tranIdStr.length - 1);
                                layer.close(index);
                                //使用ajax删除选中的
                                $.ajax({
                                    type: "put",//提交方式为put,替代delte请求
                                    url: "/Trans/batchBel/" + tranIdStr,//后台Servlet路径
                                });
                                $.ajax({
                                    type: "put",//提交方式为put,替代delte请求
                                    url: "/srapcrud/delete/" + tranIdStr,//后台Servlet路径
                                    success: function (msg) {
                                        layer.msg('删除成功');
                                        //重新加载表格数据
                                        table.reload('TransTable');
                                    }
                                });
                            });
                        } else {
                            //没有选择数据行
                            layer.msg('你至少选一行！');
                        }
                        break;
                    case 'add':
                        //设置请求方式为post,表示增加交易数据
                        mehtod = "post";
                        //清空表单

                        $("#transForm")[0].reset();
                        layer.open({
                            type: 1,//外部页面为2，内部层1
                            title: "<span style='color:white' align='center'><i class='layui-icon'>&#xe61f;</i> 添加新交易数据</span>",
                            area: ['80%', '55%'],
                            fix: false,
                            maxmin: true,
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'layui-layer-lan',
                            content: $("#data-main").html(),
                            anim: 1
                        });
                        //将主键设置成允许修改[防止因先修改，后增加时，该字段被设置为只读]
                        $("input[name='tranId']").prop("readonly", false);

                        break;
                    case "lead_in_shang":
                        layer.open({
                            type: 1,//外部页面为2，内部层1
                            title: "<span style='color:white' align='center'><i class='layui-icon'>&#xe61f;</i> 导入交易数据</span>",
                            area: ['30%', '30%'],
                            fix: false,
                            maxmin: true,
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'layui-layer-lan',
                            content: $("#lead-in").html(),
                            anim: 1
                        });

                        //JS校验form表单信息
                    function checkData() {
                        var fileDir = $("#upfile").val();
                        var suffix = fileDir.substr(fileDir.lastIndexOf("."));
                        if ("" == fileDir) {
                            alert("选择需要导入的Excel文件！");
                            return false;
                        }
                        if (".xls" != suffix && ".xlsx" != suffix) {
                            alert("选择Excel格式的文件导入！");
                            return false;
                        }
                        return true;
                    }

                        break;
                }
            });


            //监听表格行工具(操作)事件
            table.on("tool(TransList)", function (obj) {
                //得到表格行数据
                var data = obj.data;
                //判断事件event值，与lay-event属性比较(使用switch或if梯形结构都可以,前面已经用过switch,此处使用if梯形结构)
                //判断是否为行修改操作
                if (obj.event == "update") {
                    //将设置请求方式为put
                    mehtod = "put";
                    //设置界面信息
                    layer.open({
                        type: 1,
                        title: "<span style='color:white' ><i class='layui-icon'>&#xe6b2;</i> 修改交易数据</span>",
                        area: ['80%', '55%'],
                        shade: 0.4,
                        content: $("#data-main").html(),
                        skin: 'layui-layer-lan',
                        anim: 1,
                    });
                    //将当前行数据显示在表单各字段中
                    form.val("transFormTest", {
                        "tranId": data.tranId,
                        "tranDate": data.tranDate,
                        "tranNum": data.tranNum,
                        "price": data.price,
                        "settMoney": data.settMoney,
                        "tranMoney": data.tranMoney,
                        "settDate": data.settDate,
                        "fundId": data.fundId,
                        "seId": data.seId,
                        "stockId": data.stockId,
                        "seatId": data.seatId,
                        "caId": data.caId,
                        "may": data.may,
                        "breedRateId": data.breedRateId,
                        "seInte": data.seInte,
                        "tranStatus": data.tranStatus,
                        "actMoney": data.actMoney,
                        "mark": data.mark
                    });
                    //将主键设置成只读:不允许修改
                    $("input[name='tranId']").prop("readonly", "readonly");
                } else if (obj.event == "delete") {//判断是否为行删除操作
                    layer.confirm("真的删除交易数据编为" + data.tranId + "这行数据吗?", function (index) {
                        //执行表格中删除操作
                        obj.del();
                        layer.close(index);
                        var srapId = data.tranId;
                        $.ajax({
                            type: "post",
                            url: "/securcontroller/TransDelete",
                            data: "caId=" + data.caId + "&tranDate=" + data.tranDate,

                        });
                        $.ajax({
                            type: "delete",
                            url: "/Trans/action/" + data.tranId,//后台Servlet路径/Transcrud/Trans
                            success: function (msg) {
                                layer.msg(msg);
                                table.reload('TransTable');
                            }
                        });
                    });
                }
            });

            //多条件搜索
            //搜索表单中提交按钮的事件代码
            form.on("submit(provinceSearch)", function (data) {
                //定义表单数据对象
                var datafrom = data.field;
                //得到表单json格式字符串
                var json = JSON.stringify(data.field);
                //重新加载表格对象
                table.reload("TransTable", {
                    //页码
                    page: {
                        curr: 1
                    },
                    //条件数据，会带入后台
                    where: {
                        mark: datafrom.mark,
                        tranDate: datafrom.tranDate
                    }
                });
                return false;
            });
        });
    </script>
</blockquote>
</body>
</html>
